<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单列表</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        .search-container {
            margin: 20px 0;
        }

        input[type="text"] {
            padding: 8px;
            width: 200px;
            margin-right: 10px;
        }

        button {
            padding: 8px 16px;
            margin-right: 10px;
            cursor: pointer;
        }

        .pagination {
            margin-top: 20px;
        }

        .pagination button {
            margin: 0 5px;
        }

        .loading {
            display: none;
            text-align: center;
            margin: 20px 0;
        }

        .error {
            color: red;
            margin: 20px 0;
            display: none;
        }
    </style>
</head>

<body>
    <h1>订单列表</h1>
    <div class="search-container">
        <input type="text" id="likeValue" placeholder="输入菜品名称搜索">
        <button onclick="searchOrders(1)">搜索</button>
    </div>
    
    <div id="loading" class="loading">加载中...</div>
    <div id="error" class="error"></div>

    <table id="orderTable">
        <thead>
            <tr>
                <th>订单 ID</th>
                <th>菜品名称</th>
                <th>菜品价格</th>
                <th>下单时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div id="pagination" class="pagination"></div>

    <script>
        function showLoading() {
            document.getElementById('loading').style.display = 'block';
            document.getElementById('error').style.display = 'none';
        }

        function hideLoading() {
            document.getElementById('loading').style.display = 'none';
        }

        function showError(message) {
            document.getElementById('error').textContent = message;
            document.getElementById('error').style.display = 'block';
        }

        function searchOrders(pageNo) {
            showLoading();
            const likeValue = document.getElementById('likeValue').value;
            const xhr = new XMLHttpRequest();
            xhr.open('GET', `selectByPage.orders?pageNo=${pageNo}&likeValue=${encodeURIComponent(likeValue)}`, true);
            xhr.setRequestHeader('Content-Type', 'application/json');
            
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    hideLoading();
                    if (xhr.status === 200) {
                        try {
                            const response = JSON.parse(xhr.responseText);
                            const orders = response.recordList;
                            const tableBody = document.getElementById('orderTable').getElementsByTagName('tbody')[0];
                            tableBody.innerHTML = '';
                            
                            if (orders && orders.length > 0) {
                                orders.forEach(order => {
                                    const row = tableBody.insertRow();
                                    const idCell = row.insertCell(0);
                                    const dishNameCell = row.insertCell(1);
                                    const dishPriceCell = row.insertCell(2);
                                    const orderTimeCell = row.insertCell(3);
                                    const actionCell = row.insertCell(4);

                                    idCell.textContent = order.order_id;
                                    dishNameCell.textContent = order.dish_name;
                                    dishPriceCell.textContent = order.dish_price;
                                    orderTimeCell.textContent = order.order_time;

                                    const editButton = document.createElement('button');
                                    editButton.textContent = '编辑';
                                    editButton.onclick = () => editOrder(order.order_id);
                                    actionCell.appendChild(editButton);

                                    const deleteButton = document.createElement('button');
                                    deleteButton.textContent = '删除';
                                    deleteButton.onclick = () => deleteOrder(order.order_id);
                                    actionCell.appendChild(deleteButton);
                                });

                                // 生成分页按钮
                                const totalPages = response.totalPages;
                                const paginationDiv = document.getElementById('pagination');
                                paginationDiv.innerHTML = '';
                                for (let i = 1; i <= totalPages; i++) {
                                    const pageButton = document.createElement('button');
                                    pageButton.textContent = i;
                                    pageButton.onclick = () => searchOrders(i);
                                    if (i === pageNo) {
                                        pageButton.style.backgroundColor = '#4CAF50';
                                        pageButton.style.color = 'white';
                                    }
                                    paginationDiv.appendChild(pageButton);
                                }
                            } else {
                                tableBody.innerHTML = '<tr><td colspan="5" style="text-align: center;">暂无数据</td></tr>';
                                document.getElementById('pagination').innerHTML = '';
                            }
                        } catch (e) {
                            showError('解析响应数据失败：' + e.message);
                        }
                    } else {
                        showError('请求失败，状态码：' + xhr.status);
                    }
                }
            };

            xhr.onerror = function() {
                hideLoading();
                showError('网络请求失败，请检查网络连接');
            };

            xhr.send();
        }

        function addOrder() {
            window.location.href = 'orders_toAdd.html';
        }

        function editOrder(orderId) {
            window.location.href = `toEdit.orders?order_id=${orderId}`;
        }

        function deleteOrder(orderId) {
            if (confirm('确定要删除该订单吗？')) {
                showLoading();
                const xhr = new XMLHttpRequest();
                xhr.open('GET', `deleteById.orders?order_id=${orderId}`, true);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        hideLoading();
                        if (xhr.status === 200) {
                            searchOrders(1);
                        } else {
                            showError('删除失败，状态码：' + xhr.status);
                        }
                    }
                };
                xhr.onerror = function() {
                    hideLoading();
                    showError('网络请求失败，请检查网络连接');
                };
                xhr.send();
            }
        }

        // 页面加载时默认搜索第一页
        window.onload = function () {
            searchOrders(1);
        };
    </script>
</body>

</html>